// 修正文档就绪函数语法
$(document).ready(function() {
    const API_BASE_URL = 'http://localhost:8080/api';
    // 初始化票房统计
    initBoxOfficeStatistics();
    initBoxOfficeStatistics2();
    // 图表初始化函数
    function initChart(selector, option) {
        const myChart = echarts.init(document.querySelector(selector));
        myChart.setOption(option);

        // 添加窗口大小变化监听
        window.addEventListener("resize", function() {
            myChart.resize();
            console.log("监控窗口变化，实现图形自适应窗口大小");
        });

        return myChart;
    }
    function initBoxOfficeStatistics() {
        // 定义数据展示元素
        const $totalBoxoffice = $(".no-hd li:first-child");
        const $todayBoxoffice = $(".no-hd li:last-child");

        // IIFE函数封装数据请求
        (function() {
            // 发起数据请求
            $.getJSON('/api/boxoffice/statistics', function(data) {
                if (data.code === 200) {
                    // 格式化数字（添加千位分隔符）
                    const formatNumber = (num) => num.toLocaleString() + " ";

                    // 渲染数据
                    $totalBoxoffice.text(formatNumber(data.data.totalBoxoffice));
                    $todayBoxoffice.text(formatNumber(data.data.todayBoxoffice));
                } else {
                    console.error('数据加载失败:', data.message);
                    // 显示默认值（可选）
                    $totalBoxoffice.text("--");
                    $todayBoxoffice.text("--");
                }
            }).fail(function(jqXHR) {
                console.error('网络请求失败:', jqXHR.status, jqXHR.responseText);
                // 显示错误提示（可选）
                $totalBoxoffice.text("456213");
                $todayBoxoffice.text("456244");
            });
        })();
    }

    function initBoxOfficeStatistics2() {
        // 定义数据展示元素
        const $totalTickets = $(".nom-hd li:first-child");
        const $todayTickets = $(".nom-hd li:last-child");

        // IIFE函数封装数据请求
        (function() {
            // 发起数据请求
            $.getJSON('/api/boxoffice/statistics2', function(data) {
                if (data.code === 200) {
                    // 格式化数字（添加千位分隔符）
                    const formatNumber = (num) => num.toLocaleString() + " ";

                    // 渲染数据
                    $totalTickets.text(formatNumber(data.data.totalTickets));
                    $todayTickets.text(formatNumber(data.data.todayTickets));
                } else {
                    console.error('数据加载失败:', data.message);
                    // 显示默认值（可选）
                    $totalTickets.text("--");
                    $todayTickets.text("--");
                }
            }).fail(function(jqXHR) {
                console.error('网络请求失败:', jqXHR.status, jqXHR.responseText);
                // 显示错误提示（可选）
                $totalTickets.text("123456");
                $todayTickets.text("864975");
            });
        })();
    }


    // 热门电影票房柱状图
    (function() {
        const optionb1 = {
            backgroundColor: 'transparent',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function(params) {
                    return '<div>' + params[0].name + '电影<br>' + '票房' + '<span style="color: #00BFFF;">' + params[0].value + '</span>万元' + '</div>';
                }
            },
            legend: {
                data: ['line', 'bar'],
                textStyle: {
                    color: '#ccc'
                }
            },
            xAxis: {
                type: 'category',
                data: ['电影A', '电影B', '电影C', '电影D', '电影E'],
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                },
                axisLabel: {
                    color: "rgba(255,255,255,.6) ",
                    fontSize: "12",
                    show: true,
                    interval: 0
                }
            },
            yAxis: {
                splitLine: { show: false },
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                },
                axisLabel: {
                    color: "rgba(255,255,255,.6) ",
                    fontSize: 12,
                }
            },
            series: [
                {
                    name: 'line',
                    type: 'line',
                    smooth: true,
                    showAllSymbol: true,
                    symbol: 'emptyCircle',
                    symbolSize: 15,
                    data: []
                },
                {
                    name: 'bar',
                    type: 'bar',
                    barWidth: 10,
                    itemStyle: {
                        borderRadius: 5,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#14c8d4' },
                            { offset: 1, color: 'blue' }
                        ])
                    },
                    data: []
                },
                {
                    name: 'line',
                    type: 'bar',
                    barGap: '-100%',
                    barWidth: 10,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(20,200,212,0.5)' },
                            { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
                            { offset: 1, color: 'rgba(20,200,212,0)' }
                        ])
                    },
                    z: -12,
                    data: []
                },
                {
                    name: 'dotted',
                    type: 'pictorialBar',
                    symbol: 'rect',
                    itemStyle: {
                        color: '#0f375f'
                    },
                    symbolRepeat: true,
                    symbolSize: [12, 4],
                    symbolMargin: 1,
                    z: -10,
                    data: []
                }
            ]
        };
        const barChart = initChart(".bar .chart", optionb1);

        $.getJSON(API_BASE_URL + '/view/getHotMovieBoxOffice', function (data) {
            if (data && data.data && data.data.length > 0) {
                const movieNames = data.data.map(item => item.movie_name);
                const boxOfficeData = data.data.map(item => item.box_office);

                barChart.setOption({
                    xAxis: {
                        data: movieNames
                    },
                    series: [
                        {
                            data: boxOfficeData // 设置line系列的数据与bar系列相同
                        },
                        {
                            data: boxOfficeData
                        },
                        {
                            data: boxOfficeData // 设置line系列的数据与bar系列相同
                        },
                        {
                            data: boxOfficeData // 设置dotted系列的数据与bar系列相同
                        }
                    ]
                });
            } else {
                console.error('数据格式不正确或为空:', data);
            }
        }).fail(function(error) {
            console.error('获取热门电影票房数据失败:', error);
        });
    })();

    // 不同类型电影占比饼图
    (function() {
        const optionPie = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                textStyle: {
                    color: 'rgba(255,255,255,.6)'
                }
            },
            series: [
                {
                    name: '电影类型占比',
                    type: 'pie',
                    radius: '50%',
                    center: ['50%', '50%'],
                    data: [
                        {value: 335, name: '动作片'},
                        {value: 310, name: '喜剧片'},
                        {value: 234, name: '科幻片'},
                        {value: 135, name: '爱情片'},
                        {value: 1548, name: '其他'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        const pieChart = initChart(".pie .chart", optionPie);

        $.getJSON('http://localhost:8080/api/view/getMovieTypeData', function (data) {
            if (data && data.data && data.data.length > 0) {
                // 转换数据格式
                const formattedData = data.data.map(item => ({
                    value: item.movie_count,
                    name: item.type_name
                }));

                // 更新图表数据
                pieChart.setOption({
                    series: [{
                        data: formattedData
                    }]
                });
            } else {
                console.error('数据格式不正确或为空:', data);
            }
        }).fail(function(error) {
            console.error('获取电影类型数据失败:', error);
        });
    })();

    // 票房趋势折线图
    (function() {
        var yearData = [
            {
                year: '本周',
                data: [
                    [120, 132, 101, 134, 90, 230, 210],
                    [80, 92, 71, 94, 60, 180, 160] // 新增一条折线数据
                ]
            },
        ];

        const optionl1 = {
            color: ["#00f2f1", "#FF4500"], // 设置两条线的颜色
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                textStyle: {
                    color: '#4c9bfd'
                },
                right: '25%'
            },
            grid: {
                top: '15%',
                left: '2%',
                right: '3%',
                bottom: '2%',
                show: true,
                borderColor: '#012f4a',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#4c9bfd'
                },
                axisLine: {
                    show: false
                },
            },
            yAxis: {
                type: 'value',
                axisTick: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        color: '#012f4a'
                    }
                },
                axisLabel: {
                    color: '#4c9bfd'
                },
            },
            series: [
                { name: '本周票房', type: 'line', data: [], smooth: true },
                { name: '上周票房', type: 'line', data: [], smooth: true }
            ]
        };
        const lineChart = initChart(".line .chart", optionl1);

        $.getJSON(API_BASE_URL + '/view/getBoxOfficeTrend', function (response) {
            if (response && response.code === 200 && response.data && response.data.length > 0) {
                // 从7条记录中提取本周和上周数据
                const thisWeekData = response.data.map(item => item.thisWeek);
                const lastWeekData = response.data.map(item => item.lastWeek);

                lineChart.setOption({
                    series: [
                        { data: thisWeekData },
                        { data: lastWeekData }
                    ]
                });
            } else {
                console.error('数据格式不正确或为空:', response);
            }
        }).fail(function(error) {
            console.error('获取票房趋势数据失败:', error);
        });
    })();

    // 影院售票排行条形图
    (function() {
        var myColor = ["#FF0000", "#FF6347", "#FA8072", "#FF4500", "#FF8C00"];

        const optionbar2 = {
            grid: {
                top: '10%',
                left: '22%',
                bottom: '10%',
            },
            xAxis: {
                show: false,
            },
            yAxis: [
                {
                    type: 'category',
                    data: ['影院A', '影院B', '影院C', '影院D', '影院E'],
                    inverse: true,
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,1)'
                    }
                },
                {
                    show: true,
                    inverse: true,
                    data: [1200, 1000, 800, 600, 400],
                    axisLine: {show: false},
                    axisTick: {show: false},
                    axisLabel: {
                        color: "#fff",
                        fontSize: 12,
                        formatter: function(value) {
                            return value.toLocaleString();
                        }
                    }
                }
            ],
            series: [
                {
                    name: '条',
                    type: 'bar',
                    data: [90, 80, 70, 60, 50],
                    itemStyle: {
                        barBorderRadius: 20,
                        color: function(params) {
                            return myColor[params.dataIndex];
                        }
                    },
                    barWidth: 20,
                    label: {
                        show: true,
                        position: "insideRight",
                        formatter: "{c}%",
                    }
                },
                {
                    name: '框',
                    type: 'bar',
                    data: [100, 100, 100, 100, 100],
                    barWidth: 20,
                    yAxisIndex: 1,
                    itemStyle: {
                        color: "none",
                        borderColor: "#00c1de",
                        borderWidth: 3,
                        barBorderRadius: 15,
                    }
                }
            ]
        };
        const bar2Chart = initChart(".bar2 .chart", optionbar2);
        $.getJSON(API_BASE_URL + '/view/getCinemaData', function (data) {
            if (data && data.data && data.data.length > 0) {
                const cinemaNames = data.data.map(item => item.cinema_name);
                const ticketSales = data.data.map(item => item.ticket_sales);
                const maxSales = Math.max(...ticketSales);
                const salesPercentages = ticketSales.map(sales => (sales / maxSales) * 100);

                bar2Chart.setOption({
                    yAxis: [
                        {
                            data: cinemaNames
                        },
                        {
                            data: ticketSales
                        }
                    ],
                    series: [
                        {
                            data: salesPercentages
                        },
                        {
                            data: new Array(ticketSales.length).fill(100)
                        }
                    ]
                });
            } else {
                console.error('数据格式不正确或为空:', data);
            }
        }).fail(function(error) {
            console.error('获取影院售票排行数据失败:', error);
        });
    })();


    // 观众年龄分布兰丁格尔玫瑰图
    (function() {
        const optionAgeBar = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c}'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                textStyle: {
                    color: 'blue'
                }
            },
            polar: {
                radius: [0, '75%']
            },
            angleAxis: {
                type: 'category',
                data: ['0-18岁', '19-30岁', '31-45岁', '46-60岁', '60岁以上'],
                boundaryGap: false,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'blue'
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'blue'
                    }
                },
                axisLabel: {
                    color: 'blue'
                }
            },
            radiusAxis: {
                type: 'value',
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            },
            series: [
                {
                    name: '观众数量',
                    type: 'bar',
                    data: [200, 500, 300, 150, 50],
                    coordinateSystem: 'polar',
                    itemStyle: {
                        color: "red"
                    },
                    label: {
                        show: true,
                        position: 'outside',
                        formatter: '{c}'
                    }
                }
            ]
        };
        const ageBarChart = initChart(".age-bar .chart", optionAgeBar);

        $.getJSON(API_BASE_URL + '/view/getAgeData')
            .done(function(response) {
                console.log("年龄分布数据加载成功:", response);
                if (response && response.code === 200 && response.data && response.data.length > 0) {
                    ageBarChart.setOption({
                        series: [{
                            data: response.data
                        }]
                    });
                } else {
                    console.error("年龄分布数据格式不正确:", response);
                    // 使用默认数据
                    ageBarChart.setOption({
                        series: [{
                            data: [200, 500, 300, 150, 50]
                        }]
                    });
                }
            })
            .fail(function(error) {
                console.error("年龄分布数据加载失败:", error);
                // 使用默认数据
                ageBarChart.setOption({
                    series: [{
                        data: [200, 500, 300, 150, 50]
                    }]
                });
            })
            .always(function() {
                console.log("年龄分布数据加载完成");
            });
    })();



    // 热门地区分布图
    (function() {
        const optionMap = {
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>票房: {c} 万元'
            },
            visualMap: {
                min: 0,
                max: 1000,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'],
                calculable: true,
                inRange: {
                    color: ['#e0ffff', '#006edd']
                }
            },
            series: [
                {
                    name: '热门地区票房',
                    type: 'map',
                    map: 'china',
                    label: {
                        show: true,
                        color: '#333'
                    },
                    data: [
                        {name: '北京', value: 800},
                        {name: '上海', value: 750},
                        {name: '广东', value: 900},
                        {name: '江苏', value: 650},
                        {name: '浙江', value: 700}
                    ]
                }
            ]
        };
        // 修正选择器，与其他图表保持一致的命名模式
        const mapChart = initChart(".map .echart", optionMap);

        $.getJSON(API_BASE_URL + '/view/getHotAreaBoxOffice', function (data) {
            if (data && data.data && data.data.length > 0) {
                mapChart.setOption({
                    series: [{
                        data: data.data
                    }]
                });
            } else {
                console.error('数据格式不正确或为空:', data);
            }
        }).fail(function(error) {
            console.error('获取热门地区票房数据失败:', error);
        });
    })();
});